<template>
  <a-modal
    title="新增流程"
    width="60%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @cancel="handleCancel"
    cancelText="关闭"
    okText="保存"
    @ok="handleConfirm"
    style="top:20px;"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :rules="validatorRules" :model="model" layout="vertical">
        <a-form-model-item label="流程类型" prop="processType">
          <a-select v-model="model.processType"  placeholder="请选择流程类型">
            <a-select-option v-for="(item,index) in processTypeList" :value="item.value" :key="index" >{{item.label}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-spin>


  </a-modal>
</template>

<script>
  import { postAction,getAction } from '@/api/manage'
  import { DictMixin } from '@/mixins/DictMixin'

  export default {
    name: 'AddProcessModal',
    mixins: [DictMixin],
    components: {},
    data() {
      return {
        //弹窗属性
        visible: false,
        confirmLoading: false,
        model: {},
        processTypeList:[],
        validatorRules: {
          processType:  [{ required: true, message: '请选择流程类型'}],
        },
        url:{
            add:"/process/extActProcess/add"
        }
      }
    },
    created() {
      this.dictInitalConfig();
    },
    methods: {
      /** 字段数据初始化 */
      dictInitalConfig() {
        getAction('/sys/dict/getDictItems/bpm_process_type').then((res) => {
          if (res.success) {
            res.result.forEach((record) => {
              this.processTypeList.push({
                label: record.text,
                value: record.value,
              })
            })
          }
        });
      },
      add() {
        this.visible = true
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.model = Object.assign({},{})
        })
      },
      handleConfirm() {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate((ok, err) => {
          if (ok) {
            that.confirmLoading = true;
            let processTypeArr = that.processTypeList.filter(item => item.value == that.model.processType);
            if(processTypeArr.length > 0){
              that.model.processName = processTypeArr[0].label;
            }
            postAction(this.url.add,that.model).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
                that.close();
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        });
      },
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
    }
  }
</script>